<template>
    <div class="body" v-loading="loading"  >
      <div>
        <el-button type="primary" size="small" icon="el-icon-s-promotion" @click="doAudit" v-if="header.status = 'save'">&nbsp;审&nbsp;核&nbsp;</el-button>
        <el-button type="info" size="small" icon="el-icon-back" @click="gotoList">&nbsp;返&nbsp;回&nbsp;</el-button>

      </div>

     <div id="box">
       <el-form ref="form" :model="header" size="small" label-width="90px" :inline="true" class="header">
         <el-row>
           <el-col :span="6">
             <el-form-item label="任务单号">{{ header.billNo }}</el-form-item>
           </el-col>
           <el-col :span="6">
             <el-form-item label="任务名称">{{ header.materialName }}</el-form-item>
           </el-col>
           <el-col :span="6">
             <el-form-item label="任务编码">{{ header.materialNo }}</el-form-item>
           </el-col>
           <el-col :span="6">
             <el-form-item label="任务规格">{{ header.materialModel }}</el-form-item>
           </el-col>
         </el-row>
         <el-row>
           <el-col :span="6">
             <el-form-item label="单位">{{ header.unit }}</el-form-item>
           </el-col>
           <el-col :span="6">
             <el-form-item label="任务数量">{{ header.count ? Number(header.count.toFixed(6)): header.count }}</el-form-item>
           </el-col>
           <el-col :span="6">
             <el-form-item label="审核人">{{ header.auditUserName }}</el-form-item>
           </el-col>
         </el-row>
         <br />
       </el-form>
       <el-divider></el-divider>
       <!--    <el-form-item label="领料单领料"></el-form-item>-->

       <el-table :data="pickList" class="detail" height="25vh" >
         <el-table-column label="No." width="60" align="right" type="index"></el-table-column>
         <el-table-column label="领料单号" width="200" prop="billNo"></el-table-column>
         <el-table-column label="领料名称" width="150" prop="materialName"></el-table-column>
         <el-table-column label="领料编码" width="150" prop="materialNo"></el-table-column>
         <el-table-column label="领料规格" width="120" prop="materialSpec"></el-table-column>
         <el-table-column label="领料批次号" width="150" prop="batchNo"></el-table-column>
         <el-table-column label="单位" width="60" prop="unit"></el-table-column>
         <el-table-column label="领料数量" width="150" align="center">
           <template #default="scope">
             {{ scope.row.count }}{{ scope.row.unit }}
           </template>
         </el-table-column>
         <el-table-column label="审核人" width="100" prop="createUserName"></el-table-column>
       </el-table>
       <el-divider></el-divider>

       <el-table :data="supList" class="detail" height="25vh" >
         <el-table-column label="No." width="60" align="right" type="index"></el-table-column>
         <el-table-column label="补料单号" width="200" prop="billNo"></el-table-column>
         <el-table-column label="补料名称" width="150" prop="materialName"></el-table-column>
         <el-table-column label="补料编码" width="150" prop="materialNo"></el-table-column>
         <el-table-column label="补料规格" width="120" prop="materialSpec"></el-table-column>
         <el-table-column label="补料批次号" width="150" prop="batchNo"></el-table-column>
         <el-table-column label="单位" width="60" prop="unit"></el-table-column>
         <el-table-column label="补料数量" width="150" align="center">
           <template #default="scope">
             {{ scope.row.count }}{{ scope.row.unit }}
           </template>
         </el-table-column>
<!--         <el-table-column label="审核人" width="100" prop="createUserName"></el-table-column>-->
       </el-table>
       <el-divider></el-divider>


       <el-table :data="returnList" class="detail" height="25vh" >
         <el-table-column label="No." width="60" align="right" type="index"></el-table-column>
         <el-table-column label="退料入库单号" width="200" prop="billNo"></el-table-column>
         <el-table-column label="退料名称" width="150" prop="materialName"></el-table-column>
         <el-table-column label="退料编码" width="150" prop="materialNo"></el-table-column>
         <el-table-column label="退料规格" width="120" prop="materialSpec"></el-table-column>
         <el-table-column label="退料批次号" width="150" prop="batchNo"></el-table-column>
         <el-table-column label="单位" width="60" prop="unit"></el-table-column>
         <el-table-column label="退料数量" width="150" align="center">
           <template #default="scope">
             {{ scope.row.count }}{{ scope.row.unit }}
           </template>
         </el-table-column>
<!--         <el-table-column label="创建人" width="100" prop="createUserName"></el-table-column>-->
       </el-table>
       <el-table :data="desList" class="detail" height="25vh">
         <el-table-column label="No." width="60" align="right" type="index"></el-table-column>
         <el-table-column label="变品退料入库单号" width="200" prop="billNo"></el-table-column>
         <el-table-column label="变品退料名称" width="150" prop="materialName"></el-table-column>
         <el-table-column label="变品退料编码" width="150" prop="materialNo"></el-table-column>
         <el-table-column label="变品退料规格" width="120" prop="materialSpec"></el-table-column>
         <el-table-column label="变品退料批次号" width="150" prop="batchNo"></el-table-column>
         <el-table-column label="单位" width="60" prop="unit"></el-table-column>
         <el-table-column label="变品退料入库数量" width="150" align="center">
           <template #default="scope">
             {{ scope.row.count }}{{ scope.row.unit }}
           </template>
         </el-table-column>
<!--         <el-table-column label="创建人" width="100" prop="createUserName"></el-table-column>-->
       </el-table>

       <el-table :data="taskList" class="detail" height="25vh" >
         <el-table-column label="No." width="60" align="right" type="index"></el-table-column>
         <el-table-column label="领料入库单号" width="200" prop="billNo"></el-table-column>
         <el-table-column label="领料入库名称" width="150" prop="materialName"></el-table-column>
         <el-table-column label="领料入库编码" width="150" prop="materialNo"></el-table-column>
         <el-table-column label="领料入库规格" width="120" prop="materialSpec"></el-table-column>
         <el-table-column label="领料入库批次号" width="150" prop="batchNo"></el-table-column>
         <el-table-column label="单位" width="60" prop="unit"></el-table-column>
         <el-table-column label="领料入库数量" width="150" align="center">
           <template #default="scope">
             {{ scope.row.count }}{{ scope.row.unit }}
           </template>
         </el-table-column>
<!--         <el-table-column label="创建人" width="100" prop="createUserName"></el-table-column>-->
       </el-table>
     </div>

     </div>

</template>

<script>
import dayjs from 'dayjs'
import { getBoxNo } from '../../utils'

export default {
  data() {
    return {
      loading: false,
      materialLoading: false,
      header: {},
      pickList:[],
      dataList: [],
      taskList:[],
      returnList:[],
      supList:[]

    }
  },
  async mounted() {
    await this.getStock()
    let billNo = this.$route.query.billNo
    if (billNo) {
      return this.getBill(billNo)
    }
  },
  methods: {
    async getStock() {
      this.loading = true;
      try {
        let res = await this.$api.getChildDictionaryListByKeys({
          keys: ['stock']
        });
        if (!res.res) return;
        this.stockList = res.stock;
      } finally {
        this.loading = false;
      }
    },
    /**
     * 获取状态名
     */
    getStockName(val) {
      if (this.stockList && this.stockList.length > 0) {
        for(let i = 0; i < this.stockList.length; i++) {
          if (this.stockList[i].key === val) {
            return this.stockList[i].name;
          }
        }
      }
      return '';
    },
    gotoList() {
      return this.$router.push('/produce/produceTaskAuditList')
    },
    async getBill(billNo) {
      this.loading = true
      try {
        let res = await this.callApi('get_produce_task_audit_detail', {
          billNo: billNo
        })
        if (res.res) {
          this.header = res.header || {}
          this.materialPick = res.materialPick || {}
          this.pickList = res.pickList || []
          this.dataList = res.data || []
          this.taskList = res.taskList || []
          this.desList = res.desList || []
          this.returnList = res.returnList || []
          this.supList = res.supList || []
        }
      } finally {
        this.loading = false
      }
    }, async doAudit() {
      this.loading = true
      try {
        let res = await this.callApi('audit_prd_task_bill', { billNo: this.header.billNo })
        if (!res.res) {
          return
        }
        this.header.status = res.status
        this.$message.success('审核完成!')
      } finally {
        this.loading = false
      }
    },
  },

}
</script>

<style lang="scss" scoped>
#box{
  height: 650px;
  overflow: auto;
}
.body {
  padding: 20px 0;
  .header {
    margin-top: 20px;
    position: relative;
    .header_row {
      display: flex;
      >div {
        flex-shrink: 0;
      }
      :deep(.produceDate) {
        .el-input {
          width: 100%!important;
        }
      }
    }
  }
}

</style>
